const path = require('path');
const HtmlWebapckPlugin = require('html-webpack-plugin')
module.exports={
    mode:'development',
    entry: path.join(__dirname,'../index.js') ,
   
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename:'main.js'
        
      },
      devServer: {//这是开发模式下的关键，还要配合package.json中的修改.
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 9000
      },
      module:{
        rules:[
          {
            test: /\.(js||jsx)$/,//加上jsx
            exclude: /(node_modules|bower_components)/,//node_modules文件去掉，这个不需要做处理
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
                plugins: ['@babel/plugin-transform-react-jsx']//这里的plugins是在babel这个加载器里的加强配置，在其官方可查,其实还是两个包,即函数,babel-loader大包里的小包函数
              }
            }
          },
          {
            test: /\.(css)$/,
            exclude: /(node_modules|bower_components)/,
            use:[
              'style-loader',
              'css-loader',
                ]
          }
        ]
      },
      plugins:[
        new HtmlWebapckPlugin({
          filename:'index.html',
          template:path.join(__dirname,'../public/index.html')
        })
      ]

}